<template>
	<view class="settings-page">
		<!-- <view class="group-title">账号</view>
		<u-cell-group :border="false" class="settings-card">
			<u-cell v-for="(item, index) in accountSettings" :icon="item.icon"
				:icon-style="{ width: '20px', height: '20px', marginRight: '12px' }" :title="item.title" isLink
				:border="index < accountSettings.length - 1" arrow-direction="right"
				@click="handleSettingClick(item)"></u-cell>
		</u-cell-group> -->

		<view class="group-title">通用</view>
		<u-cell-group :border="false" class="settings-card">
			<u-cell v-for="(item, index) in generalSettings" :icon="item.icon"
				:icon-style="{ width: '20px', height: '20px', marginRight: '12px' }" :title="item.title" isLink
				:border="index < generalSettings.length - 1" arrow-direction="right"
				@click="handleSettingClick(item)"></u-cell>
		</u-cell-group>

		<view class="logout-section">
			<view class="logout-button" @click="handleLogout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		data() {
			return {
				accountSettings: [
					{
						title: '账号与安全',
						icon: '/static/settings/icon_account_security.png',
						target: '/pages_sub/user/settings/account-security'
					},
					{
						title: '隐私设置',
						icon: '/static/settings/icon_privacy.png',
						target: '/pages_sub/user/settings/privacy'
					},
					{
						title: '支付设置',
						icon: '/static/settings/icon_payment.png',
						target: '/pages_sub/user/settings/payment'
					},
				],
				generalSettings: [
					{
						title: '通用设置',
						icon: '/static/settings/icon_general_settings.png',
						target: '/pages_sub/user/settings/general-options'
					},
					{
						title: '通知设置',
						icon: '/static/settings/icon_notification_settings.png',
						target: '/pages_sub/user/settings/notification-options'
					},
					{
						title: '通知消息管理',
						icon: '/static/settings/icon_notification_manage.png',
						target: '/pages_sub/user/settings/notification-manage'
					},
					{
						title: '聊天设置',
						icon: '/static/settings/icon_chat_settings.png',
						target: '/pages_sub/user/settings/chat-options'
					},
					{
						title: '播放设置',
						icon: '/static/settings/icon_playback_settings.png',
						target: '/pages_sub/user/settings/playback-options'
					},
					{
						title: '背景设置',
						icon: '/static/settings/icon_background_settings.png',
						target: '/pages_sub/user/settings/background-options'
					},
					{
						title: '首页设置',
						icon: '/static/settings/icon_homepage_settings.png',
						target: '/pages_sub/user/settings/homepage-options'
					},
					{
						title: '长辈模式',
						icon: '/static/settings/icon_elderly_mode.png',
						target: '/pages_sub/user/settings/elderly-mode'
					},
					{
						title: '字体大小',
						icon: '/static/settings/icon_font_size.png',
						target: '/pages_sub/user/settings/font-size'
					}, // Assumes Aa is an image
					{
						title: '清理缓存',
						icon: '/static/settings/icon_clear_cache.png',
						action: 'clearCache'
					},
				]
			};
		},
		methods: {
			...mapActions('im', {
				imLoginAction: 'logout' // 映射 this.imLoginAction() 为 this.$store.dispatch('im/login')
			}),
			handleSettingClick(item) {
				if (item.action === 'clearCache') {
					this.confirmClearCache();
				} else if (item.target) {
					uni.navigateTo({
						url: item.target
					});
				} else {
					uni.showToast({
						title: '功能暂未开放',
						icon: 'none'
					});
				}
			},
			confirmClearCache() {
				uni.showModal({
					title: '提示',
					content: '确定要清理缓存吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '清理中...'
							});
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: '缓存已清理',
									icon: 'success'
								});
							}, 1500);
						}
					}
				});
			},
			handleLogout() {
				let confirmText = uni.getSystemInfoSync().platform == 'android' ? '取消' : '确认'
				let cancelText = uni.getSystemInfoSync().platform === 'android' ? '确认' : '取消'
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					confirmText: confirmText, // 右侧按钮显示“取消”
					cancelText: cancelText, // 左侧按钮显示“确定”
					success: (res) => {
						if (uni.getSystemInfoSync().platform === 'android') {
							if (res.cancel) { // 用户点击左侧按钮（实际是“确定”）
								this.$store.commit('logout');
								uni.removeStorageSync('token');
								this.imLoginAction();
								uni.reLaunch({
									url: '/pages_sub/login/login'
								});
							} else if (res.confirm) { // 用户点击右侧按钮（实际是“取消”）
								console.log('取消操作');
							}
						} else {
							if (res.confirm) {
								this.$store.commit('logout');
								uni.removeStorageSync('token');
								this.imLoginAction();
								uni.reLaunch({
									url: '/pages_sub/login/login'
								});
							}
						}
					}
				});
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f8fa; // Consistent light gray background
	}

	.settings-page {
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

		.group-title {
			font-size: 28rpx;
			color: #969799;
			padding: 32rpx 32rpx 16rpx 32rpx;
		}

		.settings-card {
			margin-left: 24rpx;
			margin-right: 24rpx;
			background-color: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;

			::v-deep .u-cell {
				.u-cell__body {
					padding: 28rpx 24rpx;
				}

				.u-cell__title-text {
					font-size: 30rpx;
					color: #303133;
				}

				// Ensure icon style is applied correctly by u-cell for images
				.u-icon__img {
					width: 20px !important; // Ensure these apply if icon-style isn't enough
					height: 20px !important;
					margin-right: 12px !important;
				}
			}

			::v-deep .u-line {
				margin: 0 24rpx 0 88rpx !important; // Adjust divider line to not start from the very edge
			}
		}

		.logout-section {
			margin: 60rpx 24rpx 20rpx 24rpx;
		}

		.logout-button {
			background-color: #ffffff;
			color: #fa3534;
			font-size: 32rpx;
			text-align: center;
			padding: 28rpx 0;
			border-radius: 16rpx;
			font-weight: 500; // Make text slightly bolder

			&:active {
				background-color: #f8f8f8;
			}
		}
	}
</style>